/*
 * @Author: yangrongxin
 * @Date: 2021-08-02 17:06:22
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-08-03 11:37:37
 */
import { useState, useEffect, Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, CoverView } from '@tarojs/components';
import { AtIcon } from 'taro-ui';
import { useSafeArea } from '../hooks';
import './index.module.less';

const tabBarConfig = {
  color: '#7A7E83',
  selectedColor: '#3cc51f',
};

const listConfig = [
  {
    url: '/pages/Home/index',
    text: '1',
  },
  {
    url: '/pages/PatientEducation/index',
    text: '2',
  },
  {
    url: '/pages/Evaluation/index',
    text: '3',
  },
  {
    url: '/pages/Team/index',
    text: '4',
  },
  {
    url: '/pages/My/index',
    text: '5',
  },
];

const CustomTabBar = (props) => {
  const [, safeBottom] = useSafeArea();

  const [selectedKey, setSelectedKey] = useState<number>(0);

  // const curRoute = Taro.getCurrentPages()[0]?.route || listConfig[0]?.url;
  // console.log('curRoute', curRoute);

  // console.log('setSelectedKey', selectedKey);

  // useEffect(() => {
  //   const routeIndex = listConfig.findIndex((item: any) => item.url === `/${curRoute}`);
  //   setSelectedKey(routeIndex);
  //   console.log('curRoute', curRoute);
  //   console.log('routeIndex', routeIndex);
  //   console.log('render');
  // }, [curRoute]);

  const changeTabItem = (url, index) => {
    Taro.switchTab({
      url,
    });
  };

  // 此处不能使用css module注入样式
  return (
    <CoverView
      className="tabBarWapper"
      style={{
        paddingBottom: `${safeBottom}px`,
      }}
    >
      {listConfig.map((item: any, index: number) => {
        const isActive = index === selectedKey;
        // TODO: selectedKey变化但是 组件样式不进行刷新问题处理
        return (
          <CoverView
            className={`tabBarContentItem ${isActive ? 'selected' : ''}`}
            key={String(index)}
            onClick={() => {
              setSelectedKey(index);
              changeTabItem(item.url, index);
            }}
          >
            <CoverView style={`color: ${index === selectedKey ? tabBarConfig.selectedColor : tabBarConfig.color}`}>
              占位
            </CoverView>
            <CoverView style={`color: ${index === selectedKey ? tabBarConfig.selectedColor : tabBarConfig.color}`}>
              {item.text}
            </CoverView>
          </CoverView>
        );
      })}
    </CoverView>
  );
};

export default CustomTabBar;
